<template>
  <div class="container">
    <div class="top">
      <div style="display:inline-block">
        <a-dropdown placement="bottomCenter">
          <div style="display:flex;align-items:center">
            <a-avatar :size="32" icon="user" style="margin-right:4px" />
            <span style="font-size:14px;color:white">{{ username }}</span>
          </div>
          <a-menu slot="overlay">
            <a-menu-item style="text-align:center;font-size:14px" @click="onLogout">
              退出登录
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>

    <div class="main">
      <div class="sider">
        <a-menu
          mode="inline"
          style="width:100%"
          :open-keys="openKeys"
          v-model="selectedKeys"
          @click="onMenuItemClick"
        >
          <a-sub-menu v-for="module in menuData" :key="module.name" @titleClick="onSubMenuClick">
            <span slot="title" style="font-weight:600">{{ module.meta.title }}</span>
            <a-menu-item v-for="item in module.children" :key="item.name">
              {{ item.meta.title }}
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>

      <div class="content">
        <div class="breadcrumb">
          <a-breadcrumb>
            <a-breadcrumb-item v-for="item in matchedRoute" :key="item.name">
              <router-link :to="{ name: item.name }">{{ item.meta.title }}</router-link>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>

        <div style="height:calc(100% - 60px);padding:14px">
          <div style="height:100%;background-color:white;padding:14px">
            <router-view />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import clonedeep from 'lodash.clonedeep'
import {
  Dropdown,
  Avatar,
  Menu,
  Breadcrumb
} from 'ant-design-vue'
import { routes } from '@/router/index.js'

Vue.use(Dropdown)
Vue.use(Avatar)
Vue.use(Menu)
Vue.use(Breadcrumb)

export default {
  data () {
    return {
      menuData: clonedeep(routes).find(item => item.name === 'index').children
    }
  },

  computed: {
    username () {
      return window.sessionStorage.getItem('username')
    },

    openKeys () {
      return [this.$route.matched[1].name]
    },

    selectedKeys: {
      get () {
        return this.$route.matched.length > 2 ? [this.$route.matched[2].name] : []
      },
      set () {}
    },

    matchedRoute () {
      return this.$route.matched
    }
  },
  methods: {
    onLogout () {
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('username')
      this.$router.push({ name: 'login' })
    },

    onSubMenuClick ({ key, domEvent }) {
      this.$router.push({ name: key })
    },

    onMenuItemClick ({ item, key, keyPath }) {
      this.$router.push({ name: key })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F0F2F5;
}

.top {
  height: 52px;
  background-color: #292b32;
  text-align: right;
  padding: 10px 20px 10px 0px;
}

.main {
  height: calc(100% - 52px);
  display: flex;
}

.sider {
  width: 200px;
  height: 100%;
  background-color: white;
}

.content {
  width: calc(100% - 200px);
  height: 100%;
}

.breadcrumb {
  background-color: white;
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>
